<template>
  <div class="container">
    <!-- <validate :visible="visible" :cb="validateCb" @close="visible = false" /> -->
    <div class="form">
      <div class="form-title">
        已为您匹配出第一个融资方案
      </div>
      <div class="form-item">
        <div class="form-item-label">企业名称</div>
        <div class="form-item-val">
          <input type="text" value="速微贷" />
        </div>
      </div>
      <div class="form-item">
        <div class="form-item-label">产品额度</div>
        <div class="form-item-val">
          <input type="text" value="50,000元" />
        </div>
      </div>
      <div class="form-item">
        <div class="form-item-label">利率区间</div>
        <div class="form-item-val">
          <input type="text" value="7%-12%" />
        </div>
      </div>
      <div class="form-item">
        <div class="form-item-label">额度期限</div>
        <div class="form-item-val">
          <input type="text" value="30天" />
        </div>
      </div>

      <div class="form-footer">
        <div class="footer-btn"  @click="toNext2">提升额度</div>
        <div class="footer-btn" @click="toNext">立刻申请</div>
      </div>
    </div>

    <servicer />
  </div>
</template>

<script>
import Servicer from '@/components/Servicer'

export default {
  components: {
    Servicer
  },
  data () {
    return {}
  },
  mounted () {},
  methods: {
    toNext () {
      this.$router.push({
        path: '/result'
      })
    },
    toNext2 () {
      this.$router.push({
        path: '/promote'
      })
    }
  }
}
</script>

<style lang="less" scoped>
.form {
  padding: 40px 28px 40px 40px;
  color: #fff;
  background-image: url("../assets/images/loan/border_pck3.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: none;
  // border: 1px solid #fff;
  text-align: left;

  .form-title {
    margin-bottom: 36px;
    font-family: PingFangSC-Regular;
    font-size: 17px;
    color: #ffffff;
    letter-spacing: 0;
  }

  .form-item {
    font-size: 14px;
    & + .form-item {
      margin: 16px 0 0 0;
    }
    .form-item-label {
      display: inline-block;
      font-family: PingFangSC-Regular;
      font-size: 15px;
      color: #64abff;
      letter-spacing: 0;
      text-align: right;
    }
    .form-item-val {
      // display: inline-block;
      float: right;
      text-align: right;
      input {
        width: auto;
        text-align: right;
        color: #64abff;
        background: none;
        border: none;
      }
    }
  }
}

.form-footer {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 20px 0 0 0;
  .footer-btn {
    display: inline-block;
    width: 121px;
    height: 36px;
    padding-left: 20px;
    line-height: 36px;
    margin: 0 14px 12px 0;
    font-size: 15px;
    font-weight: normal;
    background-image: url("../assets/images/match/item.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: none;
    text-align: left;
  }
}
</style>
